<template>
    <div class="navigation">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="route in routeList" :key="route.menuCode">{{ route.menuName }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script setup>
import { computed } from 'vue'
// import { useStore } from 'vuex'
import { useRoute} from 'vue-router'
// const { getters } = useStore()
const route = useRoute()
// const menuList = computed(()=>getters['userMessage/getMenuList'],)
const menuList = [
{
      "id": "432",
      "menuCode": "0049001",
      "menuName": "态势监测",
      "url": "situationMonitoring",
      "icon": "",
      "menuType": 1,
      "subType": 0,
    },
    {
      "id": "433",
      "menuCode": "0049002",
      "menuName": "模型运行监测",
      "url": "modelMonitoring",
      "icon": "",
      "menuType": 1,
      "subType": 0,
    },
    {
      "id": "434",
      "menuCode": "0049003",
      "menuName": "AI智能搜索",
      "url": "intelligentSearch",
      "icon": "",
      "menuType": 1,
      "subType": 0,
    },
    {
      "id": "435",
      "menuCode": "0049004",
      "menuName": "数据分析统计",
      "url": "dataAnalysis",
      "icon": "",
      "menuType": 1,
      "subType": 0,
    },
    {
      "id": "436",
      "menuCode": "0049005",
      "menuName": "配置管理",
      "url": "configManage",
      "icon": "",
      "menuType": 1,
      "subType": 0,
    }
]
// const routeList = computed(()=>findBreadcrumb(menuList.value,route.name))
const routeList = computed(()=>findBreadcrumb(menuList,route.name))
//递归查找当前路由相匹配的父级路由信息，用于面包屑的展示
const findBreadcrumb = (menuList, url, path = [])=> {
    for (const menu of menuList) {
        // 当前路径
        const newPath = [...path, {
            id: menu.id,
            menuCode: menu.menuCode,
            menuName: menu.menuName,
            url: menu.url
        }];

        // 如果找到匹配的url，返回当前路径
        if (menu.url === url) {
            return newPath;
        }

        // 如果当前菜单项有子菜单，递归搜索子菜单
        if (menu.childList && menu.childList.length > 0) {
            const childPath = findBreadcrumb(menu.childList, url, newPath);
            if (childPath && childPath.length > 0) {
                return childPath;
            }
        }
    }
    // 如果没有找到匹配的url，返回[]
    return [];
}

</script>
<style scoped lang="scss">
.navigation {
    width: 100%;
    padding: pxTvh(16) pxTvw(24);
    align-items: center;

    //box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
    // background: #0F121B;
    // background: linear-gradient(270deg, #102644 0%, #1E3D68 100%);
    // border: 1px solid rgba(126, 169, 255, 0.2);
    display: flex;
    box-sizing: border-box;
    z-index: 10;
}
</style>